<template>
  <el-row>
    <el-col :span="8"><div class="box-type">
      <el-card class="type-card">
        <div class="head">
          <h3 class="type_head">({{type_table.length}})</h3>
          <el-input
              class="type_input"
              placeholder="请输入箱子名称"
              suffix-icon="el-icon-search"
              v-model="type_input">
          </el-input>
        </div>
        <div class="type-table">
          <el-table
              :data="getCurrentPageData1"
              tooltip-effect="dark"
              style="width: 100%">
            <el-table-column label="序号" width="50">
              <template v-slot:default="scope">
                <span class="type_index">{{ scope.row.index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机型代码" width="80">
              <template v-slot:default="scope">
                <span class="type_code">{{ scope.row.code }}</span>
              </template>
            </el-table-column>
            <el-table-column label="箱子名称">
              <template v-slot:default="scope">
                <span class="type_name">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="容量" width="50">
              <template v-slot:default="scope">
                <span class="type_capacity">{{ scope.row.capacity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="启用" width="50">
              <template v-slot:default="scope">
                <span class="type_use">{{ scope.row.use }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="50">
              <template v-slot:default="scope">
                <i class="el-icon-edit" @click="handleEdit(scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
          <template>
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
              <el-form :model="currentRowData" label-width="100px">
                <el-form-item label="机型代码">
                  <el-input v-model="currentRowData.code" disabled></el-input>
                </el-form-item>
                <el-form-item label="箱子名称">
                  <el-input v-model="currentRowData.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="容量">
                  <el-input v-model="currentRowData.capacity" ></el-input>
                </el-form-item>
                <el-form-item label="启用">
                  <el-switch v-model="currentRowData.use" :active-value="'是'" :inactive-value="'否'" ></el-switch>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
              </div>
            </el-dialog>
          </template>
        </div>
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page.sync="currentPage1"
              :page-size="pageSize1"
              layout="total, prev, pager, next"
              :total=type_table.length>
          </el-pagination>
        </div>
      </el-card>
    </div></el-col>
    <el-col :span="9"><div class="box-list">
      <el-card class="box-card">
        <div class="head">
          <h3 class="box_head">({{box_table.length}})</h3>
          <el-input
              class="box_input"
              placeholder="请输入箱子名称"
              suffix-icon="el-icon-search"
              v-model="box_input">
          </el-input>
        </div>
        <div class="box-table">
          <el-table
              :data="getCurrentPageData2"
              tooltip-effect="dark"
              highlight-current-row
              style="width: 100%">
            <el-table-column
                label="序号"
                type="index"
                width="50">
            </el-table-column>
            <el-table-column label="机型代码" width="80">
              <template v-slot:default="scope">
                <span class="box_code">{{ scope.row.code }}</span>
              </template>
            </el-table-column>
            <el-table-column label="箱子编号" width="100">
              <template v-slot:default="scope">
                <span class="box_number">{{ scope.row.number }}</span>
              </template>
            </el-table-column>
            <el-table-column label="箱子名称">
              <template v-slot:default="scope">
                <span class="box_name">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="容量" width="60">
              <template v-slot:default="scope">
                <span class="box_capacity">{{ scope.row.capacity }}</span>
              </template>
            </el-table-column>
            <el-table-column label="描述" width="50">
              <template v-slot:default="scope">
                <span class="box_description">{{ scope.row.description }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page.sync="currentPage2"
              :page-size="pageSize2"
              layout="total, prev, pager, next"
              :total=box_table.length>
          </el-pagination>
        </div>
      </el-card>
    </div></el-col>
    <el-col :span="7"><div class="device-list">
      <el-card class="device-card">
        <div class="head">
          <h3 class="device_head">({{device_table.length}})</h3>
        </div>
        <div class="device-table">
          <el-table
              :data="getCurrentPageData3"
              tooltip-effect="dark"
              style="width: 100%">
            <el-table-column
                label="序号"
                width="50">
              <template v-slot:default="scope">
                <span class="device_index">{{ scope.row.index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设备唯一码">
              <template v-slot:default="scope">
                <span class="device_code">{{ scope.row.code }}</span>
              </template>
            </el-table-column>
            <el-table-column label="入库时间">
              <template v-slot:default="scope">
                <span class="device_time">{{ scope.row.time }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
              background
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
              :current-page.sync="currentPage3"
              :page-size="pageSize3"
              layout="total, prev, pager, next"
              :total=device_table.length>
          </el-pagination>
        </div>
      </el-card>
    </div></el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      type_input: '',
      box_input: '',
      currentPage1: 1,  //箱子查询的当前页面
      currentPage2:1,   //箱子列表的当前页面
      currentPage3:1,   //设备列表的当前页面
      pageSize1: 6,     //箱子查询每页所能显示的条目
      pageSize2: 6,     //箱子列表的每页所能显示的条目
      pageSize3: 9,    //设备列表的每页所能显示的条目
      total1: 0,        //箱子出查询的总条目数
      total2: 0,        //箱子列表的总条目数
      total3: 0,        //设备列表的总条目数
      type_table:[
        {
          index:1,
          code:"A001",
          name:'SK-2000-1电话联网接警主机',
          capacity:'10',
          use:'是'
        },
        {
          index: 2,
          code:'A002',
          name:'SK-2000-1电话联网接警主机',
          capacity:'20',
          use:'是'
        },
        {
          index: 3,
          code:'A003',
          name:'SK-236G+报警主机',
          capacity:'40',
          use:'是'
        },
        {
          index: 4,
          code:'B130',
          name:'SK-2000SMS(小机壳)短信接收转警主机',
          capacity:'40',
          use:'是'
        },
        {
          index: 5,
          code:'A004',
          name:'SK-2000SMS-1M电话联网接警主机',
          capacity:'50',
          use:'是'
        },
        {
          index: 6,
          code:'B131',
          name:'SK-2000SMS-1M电话联网接警主机',
          capacity:'60',
          use:'是'
        },
        {
          index: 7,
          code:'A005',
          name:'SK-2000SMS-1S短信接收转警主机',
          capacity:'50',
          use:'是'
        },
        {
          index: 8,
          code:'A006',
          name:'SK-2000SMS-M彩信接收转警主机',
          capacity:'0',
          use:'否'
        },
        {
          index: 9,
          code:'B132',
          name:'SK-2000SMS-M彩信接收转警主机',
          capacity:'30',
          use:'是'
        },
        {
          index: 10,
          code:'A007',
          name:'SK-2000SMS-S金库管理中心主机',
          capacity:'30',
          use:'是'
        }
      ],
      box_table:[
        {
          code:'A001',
          number:'24030005',
          name:'SK-2000-2电话联网接警主机',
          capacity:'5/10',
          description:'生产',
        },
        {
          code:'A002',
          number:'24030004',
          name:'SK-2000接警主机',
          capacity: '10/20',
          description: '-'
        },
        {
          code:'A003',
          number:'24030003',
          name:'SK-236G+报警主机',
          capacity: '30/40',
          description: '-'
        },
        {
          code:'B130',
          number:'24030002',
          name:'SK-2000SMS(小机壳)短信接收转警主机',
          capacity: '20/40',
          description: '-'
        },
        {
          code:'A004',
          number: '24030001',
          name: 'SK-2000SMS-1M电话联网接警主机',
          capacity: '20/50',
          description: '-'
        },
        {
          code: 'B131',
          number: '24020004',
          name:'SK-2000SMS报警主机主机',
          capacity: '20/60',
          description: '生产'
        },
        {
          code:'A005',
          number: '24020003',
          name:'SK-2000SMS-1S短信接收转警主机',
          capacity: '10/50',
          description: '-'
        },
        {
          code:'A006',
          number: '24020002',
          name:'SK-2000SMS-M彩信接收转警主机',
          capacity: '6/30',
          description: '-'
        },
        {
          code:'B132',
          number: '24020001',
          name:'SK-2000SMS-S金库管理中心主机',
          capacity: '2/30',
          description: '-'
        }
      ],
      device_table:[
        {
          index:1,
          code:"266A0211B22F08",
          time:'2024-03-19 15:20'
        },
        {
          index: 2,
          code:'266A0211B22F07',
          time:'2024-02-11 15:20'
        },
        {
          index: 3,
          code:'266A0211B22F06',
          time:'2024-02-10 15:20'
        },
        {
          index: 4,
          code:'266A0211B22F05',
          time:'2024-02-09 15:20'
        },
        {
          index: 5,
          code:'266A0211B22F04',
          time:'2024-01-15 15:20'
        },
        {
          index: 6,
          code:'266A0211B22F03',
          time:'2024-01-10 15:20'
        },
        {
          index: 7,
          code:'266A0211B22F02',
          time:'2024-01-03 15:20'
        },
        {
          index: 8,
          code:'266A0211B22F01',
          time:'2023-12-19 15:20'
        },
        {
          index: 9,
          code:'266A0211B22F00',
          time:'2023-06-19 15:20'
        },
        {
          index: 10,
          code:'266A0211B21F08',
          time:'2023-05-1915:20'
        },
        {
          index: 11,
          code:'266A0211B21F07',
          time:'2023-04-19 15:20'
        },
        {
          index: 12,
          code:'266A0211B21F06',
          time:'2023-03-18 15:20'
        },
        {
          index: 13,
          code:'266A0211B20F08',
          time:'2023-03-17 15:20'
        },
        {
          index: 14,
          code:'266A0211B19F08',
          time:'2023-03-15 15:20'
        },
        {
          index: 15,
          code:'266A0211B18F08',
          time:'2023-03-12 15:20'
        },
        {
          index: 16,
          code:'266A0211B17F08',
          time:'2023-03-11 15:20'
        },
        {
          index: 17,
          code:'266A0211B16F08',
          time:'2034-03-10 15:20'
        },
        {
          index: 18,
          code:'266A0211B15F08',
          time:'2023-03-09 15:20'
        },
        {
          index: 19,
          code:'266A0211B12F08',
          time:'2023-03-03 15:20'
        },
        {
          index: 20,
          code:'266A0210B22F08',
          time:'2023-02-19 15:20'
        }
      ],
      dialogVisible: false,
      currentRowData: {}
    }
  },
  computed: {
    dialogTitle() {
      return '箱子编辑';
    },
    // 计算当前页需要显示的数据
    getCurrentPageData1() {
      // const startIndex = (this.currentPage1 - 1) * this.pageSize1;
      // const endIndex = startIndex + this.pageSize1;
      // return this.type_table.slice(startIndex, endIndex);
      let filteredData = this.type_table;
      const search = this.type_input.toLowerCase();
      if (search) {
        filteredData = this.type_table.filter(data => data.name.toLowerCase().includes(search));
      }
      const startIndex = (this.currentPage1 - 1) * this.pageSize1;
      const endIndex = startIndex + this.pageSize1;
      return filteredData.slice(startIndex, endIndex);
    },
    getCurrentPageData2() {
      let filteredData = this.box_table;
      const search = this.box_input.toLowerCase();
      if (search) {
        filteredData = this.box_table.filter(data => data.name.toLowerCase().includes(search));
      }
      const startIndex = (this.currentPage2 - 1) * this.pageSize2;
      const endIndex = startIndex + this.pageSize2;
      return filteredData.slice(startIndex, endIndex);
    },
    getCurrentPageData3() {
      const startIndex = (this.currentPage3 - 1) * this.pageSize3;
      const endIndex = startIndex + this.pageSize3;
      return this.device_table.slice(startIndex, endIndex);
    }
  },
  methods: {
    handleEdit(row) {
      this.currentRowData = Object.assign({}, row);
      this.dialogVisible = true;
    },
    handleSizeChange1(newSize) {
      this.pageSize1 = newSize;
      // 重新计算当前页数
      this.currentPage1 = 1;
      // 更新总条目数
      this.total1 = this.type_table.length;
    },
    handleSizeChange2(newSize){
      this.pageSize2 = newSize;
      this.currentPage2 = 1;
      this.total2 = this.device_table.length;
    },
    handleSizeChange3(newSize){
      this.pageSize3 = newSize;
      this.currentPage3 = 1;
      this.total3 = this.device_table.length;
    },
    handleCurrentChange1(currentPage) {
      this.currentPage1 = currentPage;
    },
    handleCurrentChange2(currentPage){
      this.currentPage2 = currentPage;
    },
    handleCurrentChange3(currentPage){
      this.currentPage3 = currentPage;
    },
    handleSubmit() {
      // 在这里处理表单提交逻辑，可以获取 this.formData 中的数据
      //console.log('表单数据：', this.formData);
      // 关闭弹窗
      this.dialogVisible = false;
    },
  },
  mounted() {
    this.total1 = this.type_table.length;
    this.total3 = this.device_table.length;
  }
};
</script>
<style lang="less" scoped>
.type_head::before {
  content: '箱子类型';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}
.box_head::before {
  content: '箱子列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}
.device_head::before {
  content: '设备列表';
  display: inline; /* 将 display 属性设置为 inline */
  width: auto; /* 让宽度自适应文字长度 */
  padding-left: 10px; /* 可以调整文字与竖杠的间距 */
  border-left: 3px solid #409EFF; /* 使用边框来模拟竖杠 */
  //margin-left: 10px; /* 可以调整竖杠与标题的间距 */
}
.box-type {
  .type-card {
    margin-right: 1px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .type_input {
        margin-left: auto; /* 将输入框放置在右侧 */
        width: 60%;
      }
    }
  }
}
.box-list {
  .box-card {
    margin-left: 1px;
    margin-right: 1px;
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .box_input {
        margin-left: 10px; /* 将输入框放置在右侧 */
        width: 60%;
      }
    }
  }
}
.device-list {
  .device-card {
    margin-left: 1px;
    .head {
      margin-bottom: 10px;
    }
  }
}
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #fff;   // 进行修改未选中背景和字体
    // color: #fff;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #E8F4FF;   // 进行修改选中项背景和字体
    color: #1664FF;
  }
}
.block {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* 调整顶部间距，根据需要调整 */
}
.dialog-footer {
  text-align: center;
}
</style>